<template>
  <div class="DecContainer">
    <el-form
      ref="form"
      :model="form"
      label-position="top"
      label-width="auto"
      style="margin-left: 60px; margin-right: 60px"
      :rules="rules"
    >
      <el-form-item label="课题名称:" style="width: 700px" prop="title">
        <el-input
          v-model="form.title"
          style="width: 100%"
          placeholder="请输入课题名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="题目类型" prop="type" style="width: 1000px">
        <el-radio-group v-model="form.type" style="width: 100%">
          <el-radio label="理论性论文"></el-radio>
          <el-radio label="应用型论文"></el-radio>
          <el-radio label="设计应用"></el-radio>
          <el-radio label="调查报告"></el-radio>
          <el-radio label="工程设计"></el-radio>
          <el-radio label="科学实验"></el-radio>
          <el-radio label="软件开发"></el-radio>
          <el-radio label="理论研究"></el-radio>
          <el-radio label="综合"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属专业" prop="major" style="width: 370px">
        <el-select
          v-model="form.major"
          placeholder="请选择课题所属专业"
          style="width: 100%"
        >
          <el-option
            label="机械设计制造及其自动化"
            value="机械设计制造及其自动化"
          ></el-option>
          <el-option
            label="计算机科学与技术"
            value="计算机科学与技术"
          ></el-option>
          <el-option label="软件工程" value="软件工程"></el-option>
          <el-option label="电子信息工程" value="电子信息工程"></el-option>
          <el-option
            label="电器工程及其自动化"
            value="电器工程及其自动化"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目来源" prop="resource" style="width: 370px">
        <el-radio-group v-model="form.resource" style="width: 100%">
          <el-radio label="科研"></el-radio>
          <el-radio label="生产实际"></el-radio>
          <el-radio label="自拟"></el-radio>
          <el-radio label="其它"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="说明" style="width: 700px">
        <el-input
          maxlength="10"
          show-word-limit
          v-model="form.explain"
          style="width: 100%"
        ></el-input>
      </el-form-item>
      <el-form-item label="适用专业" prop="apply_major" style="width: 700px">
        <el-input
          maxlength="20"
          show-word-limit
          v-model="form.apply_major"
          style="width: 100%"
        ></el-input>
      </el-form-item>
      <el-form-item label="完成地点" required style="width: 700px" prop="place">
        <el-input
          maxlength="10"
          show-word-limit
          v-model="form.place"
          style="width: 100%"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否重复" style="width: 180px" prop="repetition">
        <el-radio-group v-model="form.repetition" style="width: 100%">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="1.选题背景（题目的意义与价值分析）"
        required
        style="width: 1100px"
        prop="background"
      >
        <el-input
          type="textarea"
          v-model="form.background"
          :rows="8"
          placeholder="请输入内容"
          resize="none"
          maxlength="800"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        label="2.题目的基本要求及主要研究内容简介"
        required
        style="width: 1100px"
        prop="desc"
      >
        <el-input
          type="textarea"
          v-model="form.desc"
          placeholder="请输入内容"
          :rows="8"
          resize="none"
          show-word-limit
          maxlength="800"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="3.对学生的知识、技能要求；完成本题目已具备条件，尚需要哪些条件"
        required
        style="width: 1100px"
        prop="require"
      >
        <el-input
          type="textarea"
          v-model="form.require"
          placeholder="请输入内容"
          :rows="8"
          resize="none"
          show-word-limit
          maxlength="800"
        ></el-input>
      </el-form-item>
      <el-form-item label="第二指导教师" style="width: 700px">
        <el-input v-model="form.teacher2" style="width: 100%"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')" style="width: 100px"
          >提交</el-button
        >
        <el-button @click="resetForm" style="width: 100px">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { decTitle } from "@/api/api/formApi.js";
export default {
  data() {
    return {
      form: {
        major: "",
        title: "",
        teacher2: "",
        type: "",
        resource: "",
        desc: "",
        apply_major: "",
        place: "",
        repetition: "",
        background: "",
        require: "",
        teacher1: "",
      },
      rules: {
        major: [{ required: true, message: "请选择专业", trigger: "change" }],
        title: [{ required: true, message: "请输入课题名称", trigger: "blur" }],
        type: [
          { required: true, message: "请选择题目类型", trigger: "change" },
        ],
        resource: [
          { required: true, message: "请选择题目来源", trigger: "change" },
        ],
        repetition: [
          { required: true, message: "请选择是否重复", trigger: "change" },
        ],
        apply_major: [
          { required: true, message: "请输入适用专业", trigger: "blur" },
        ],
        place: [{ required: true, message: "请输入完成地点", trigger: "blur" }],
        background: [
          { required: true, message: "请输入选题背景", trigger: "blur" },
        ],
        desc: [
          { required: true, message: "请输入题目的基本要求", trigger: "blur" },
        ],
        require: [
          { required: true, message: "请输入技能和知识要求", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.form.teacher1 = localStorage.getItem("userName");
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form);
          decTitle(this.form)
            .then((res) => {
              this.$message({
                message: "新增课题信息成功",
                type: "success",
              });
              setTimeout(() => {
                // 这里就要子向父传值了
                this.$router.push("/index/chose_title");
              }, 1000);
            })
            .catch((err) => {
              this.$message.error(err.message);
              return;
            });
        } else {
          // 这里要提示的
          this.$message({
            message: "请填写完整的课题信息！",
            type: "warning",
          });
          return false;
        }
      });
    },
    resetForm() {
      this.form.college = "";
      this.form.apply_major = "";
      this.form.major = "";
      this.form.require = "";
      this.form.background = "";
      this.form.title = "";
      this.form.teacher2 = "";
      this.form.type = "";
      this.form.resource = "";
      this.form.desc = "";
      this.form.place = "";
      this.form.repetition = "";
    },
  },
};
</script>

<style scoped>
.DecContainer {
  display: flex;
  /* align-items: flex-start; */
  flex-direction: column;
  background-color: #fff;
  height: 100%;
  border: 1px solid #e6e6e6;
  border-top: 0px;
  justify-content: center;
}
/deep/.el-form--label-top .el-form-item__label {
  float: left;
}
</style>